<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>demo12-15</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>

<body>
    <!--最左侧栏-->
    <div class="sidebar">
        <div class="logo">
            <img src="img/Item-1.png" alt="">
            <img src="img/Item-2.png" alt="">
            <img src="img/Item-3.png" alt="">
            <img src="img/Base.png" alt="">
        </div>
        <img class="sidebar-img" src="img/Grid.png" alt="">
    </div>

    <!--第二侧栏-->
    <nav class="aside">
        <ul class="menu">
            <li class="title">menu<img src="img/Settings.png"></li>
            <li class="item">Overview</li>
            <li class="item">Sales <img src="img/54.png"></li>
            <li class="item">Your Staff</li>
            <li class="item">Analytics&Targeting</li>
            <li class="item">What's New</li>
        </ul>
        <ul class="menu2">
            <li class="title">Your Products<img class="img1" src="img/Settings.png"></li>
            <li class="item"><img class="img2" src="img/Book-of-Wisdom.png">Books</li>
            <li class="item"><img class="img2" src="img/Video-Camera.png">Turlals</li>
            <li class="item"><img class="img2" src="img/Painting.png">Stocks</li>
            <li class="item"><img class="img2" src="img/Chart.png">Infographics</li>
        </ul>
        <ul class="menu3">
            <li class="title">Dashboard<img src="img/Settings.png"></li>
            <li class="item">Messages<img src="img/21.png"></li>
            <li class="item">Connections</li>
            <li class="item">Integrations<img src="img/66.png"></li>
            <li class="item">Analytics&Targeting</li>
            <li class="item">App Settings</li>
        </ul>
        <img class="img3" src="img/Fill.png">
    </nav>
    <!--右边部分-->
    <div class="main">
        <header>
            <h1>Messages</h1>
            <div class="user">
                <img src="img/Face0.png">
                <p>Jordan J.<br><span>Administrator</span></p>
            </div>
            <img class="img4" src="img/dropdown.png">
        </header>
        <div></div>
        <div class="left">
            <div class="search">
                <input class="input1" type="text" value="Search">
                <input class="button1" type="submit" value="">
            </div>
            <div class="chat0">
                <div class="chat">
                    <div class="chat1">
                        <div class="chat1-1">
                            <img src="img/Face1.png">
                            <p>Bessie Berry<br><span>Twitter</span><a>3m</a></p>
                            <a class="word1">I pay for the 4Mb/sec down, 512 Kb/sec up service<br>from O2. In fact, it's relatively quick, and stable...
                        <img src="img/4.png"></a>
                        </div>
                    </div>
                    <div class="chat2">
                        <div class="chat2-2">
                            <img src="img/Face2.png">
                            <p>Victor Weber<br><span>Adobe</span><a>8m</a></p>
                            <a class="word2">I shared this on my fb wall a few months back, and I thought I'd share it here again because it's such a great...
                        </a>
                        </div>
                    </div>
                    <div class="chat2">
                        <div class="chat2-1">
                            <img src="img/Face3.png">
                            <p>Dustin Benson<br><span>Facebook</span><a>Yesterday</a></p>
                            <a class="word2">If there is anyone who needs an invitation please add yourself in the comments of this post!

                        </a>
                        </div>
                    </div>
                    <div class="chat2">
                        <div class="chat2-1">
                            <img src="img/Face4.png">
                            <p>Jack Mason<br><span>Yahoo</span><a>Yesterday</a></p>
                            <a class="word2">BruteDC is a peer-to-peer movie+tv series sharing and downloading platform which works on intranet inside that
                        </a>
                        </div>
                    </div>
                    <div class="chat2">
                        <div class="chat2-1">
                            <img src="img/Face5.png">
                            <p>Stephen Shelton<br><span>Snapchat</span><a>13Jun</a></p>
                            <a class="word2">Yes, p2p traffic is often filtered (QoSed). Although i do use BT on O2 wires, and in good days dl speed that
                        </a>
                        </div>
                    </div>
                    <div class="chat2">
                        <div class="chat2-1">
                            <img src="img/Face6.png">
                            <p>Sally Wills<br><span>Twitter</span><a>12Jun</a></p>
                            <a class="word2">Yes, it's O2: 'internet extreme', which is no longer offered.
                        </a>
                        </div>
                    </div>
                    <div class="chat3">
                        <div class="chat3-1">
                            <img src="img/Face7.png">
                            <p>Robert Patton<br><span>A team</span><a>9Jun</a></p>
                            <a class="word2">I change my service from this 4Mb plan to their much cheaper 8Mb plan, my speed will dramatically decrease.
                        </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="nav">
                <p>Bessie Berry</p>
                <div class="box">
                    <ul class="control">
                        <li>
                            <a href="#"><img src="img/Arrow-left.png" alt=""></a>
                        </li>
                        <li>
                            <a href="#"><img src="img/Arrow-right.png"></a>
                        </li>
                    </ul>
                    <div class="abc">
                        <span class="divide">|</span>
                        <div class="text">
                            1 of 28
                        </div>
                    </div>
                    <div class="fr">
                        <ul class="icon-tools">
                            <li>
                                <a href="#">
                                    <img src="img/User-icon.png" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/Upload-icon.png" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/Trash-icon.png" alt="">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="part">
                    <div class="part1-0">
                        <div class="part1">
                            <div class="box1">
                                <img src="img/Face1.png">
                                <span class="you-name"><br>Bessie Berry &nbsp;</span>
                                <time> 8:31 AM</time>
                                <p>Hi guys Ive got the O2 package and have really slow internet. A speed check online said i can get 3mbps but it seems more like 0.5 these days, just freezing and taking ages to open pages and open audio files for example.
                                    I have decided to switch to the UPC package which offers 10mbps but do you think i will get it?</p>
                            </div>
                            <div class="box1">
                                <img src="img/Face.png">
                                <span class="you-name"><br>Jordan Jackson &nbsp;</span>
                                <time> 8:31 AM</time>
                                <p>Hi guys Ive got the O2 package and have really slow internet. A speed check online said i can get 3mbps but it seems more like 0.5 these days, just freezing and taking ages to open pages and open audio files for example.
                                    I have decided to switch to the UPC package which offers 10mbps but do you think i will get it?</p>
                            </div>
                            <div class="gray-line">
                                <span>Tuesday</span>
                            </div>
                            <div class="box1">
                                <img src="img/Face1.png">
                                <span class="you-name"><br>Bessie Berry &nbsp;</span>
                                <time> 8:31 AM</time>
                                <p>Hi guys Ive got the O2 package and have really slow internet. A speed check online said i can get 3mbps but it seems more like 0.5 these days, just freezing and taking ages to open pages and open audio files for example.
                                    I have decided to switch to the UPC package which offers 10mbps but do you think i will get it?</p>
                            </div>
                            <div class="box1">
                                <img src="img/Face.png">
                                <span class="you-name"><br>Jordan Jackson &nbsp;</span>
                                <time> 8:31 AM</time>
                                <p>Hi guys Ive got the O2 package and have really slow internet. A speed check online said i can get 3mbps but it seems more like 0.5 these days, just freezing and taking ages to open pages and open audio files for example.
                                    I have decided to switch to the UPC package which offers 10mbps but do you think i will get it?</p>
                            </div>
                            <div class="pic-send">
                                <div class="img img1">
                                    <a href="#" class="img-mask">
                                        <img src="img/Search-icon.png">
                                    </a>
                                </div>
                                <div class="img img2">
                                    <a href="#" class="img-mask">
                                        <span><img src="img/Search-icon.png"></span>
                                    </a>
                                </div>
                            </div>
                            <div class="divide-blue">
                                <span>New Message</span>
                            </div>
                            <div class="box1">
                                <img src="img/Face.png">
                                <span class="you-name"><br>Jordan Jackson &nbsp;</span>
                                <time> 8:31 AM</time>
                                <p>Hi guys Ive got the O2 package and have really slow internet. A speed check online said i can get 3mbps but it seems more like 0.5 these days, just freezing and taking ages to open pages and open audio files for example.
                                    I have decided to switch to the UPC package which offers 10mbps but do you think i will get it?</p>
                            </div>
                        </div>
                    </div>
                    <form class="reply">
                        <input type="submit" class="submit" value=" ">
                        <input type="text" placeholder="Well">
                    </form>

                    <div style="height: 100px;width: 100%"></div>



                </div>
            </div>
        </div>
    </div>

    </div>
</body>

</html>